<template>
  <div>
    <el-row style="margin-top: 20px;margin-left: 20px;display: flex;justify-content: flex-start;align-items: center;">
      <el-date-picker
        value-format="yyyy-MM"
        format="yyyy-MM"
        v-model="searchDate"
        @change="changeDate"
        type="month"
        placeholder="选择月">
      </el-date-picker>
      <span style="margin-left: 20px">{{this.searchDate.substring(0,7)}}月使用总量：{{monthFlowStatic}}GB</span>
    </el-row>
    <ve-histogram :data="chartData" style="width: 80%;margin: 20px 10%"></ve-histogram>
  </div>
</template>

<script>
  import {dayFlowCard} from '@/api/getData'

  export default {
    name: "dayFlowView",
    data() {
      return {

        searchDate: '',
        chartData: {
          columns: ['日期', '用量'],
          rows: []
        },
        monthFlowStatic: 0,
      }
    },
    created() {
      let dd = new Date();
      let y = dd.getFullYear();
      let m = dd.getMonth() + 1;
      this.searchDate = y + '-' + m;
      this.initData();
    },
    methods: {
      changeDate() {
        this.searchDate += '-1'
        this.initData();
      },
      initData() {
        this.chartData.rows = [];
        let date = this.searchDate.length<8?this.searchDate+'-01':this.searchDate;
        dayFlowCard({
          searchDate: date,
          cardId: this.cardId
        }).then(s => {
          for (let i = 0; i < s.data.x.length; i++) {
            this.chartData.rows.push({
              '日期': s.data.x[i],
              '用量': s.data.y[i]
            })
          }

          this.monthFlowStatic = s.data.monthFlow?parseFloat(s.data.monthFlow/1024).toFixed(2):0;
        })

      }
    },
    props: {
      cardId: {
        type: String,
        default: ''
      }
    }
  }
</script>

<style scoped>

</style>
